import { FC } from "react";
import { Button, Form, Input, Select } from 'antd';
import React, { useState } from 'react';
import { utimesSync } from "fs";
import style from "../../views/login/index.module.scss"
const { Option } = Select;


interface IOPTIONS {
    key: string,
    lable: string
}

interface IAFROMCONFIG {
    type: string
    lable?: string
    placenholder?: string
    key?: string,
    options?: IOPTIONS[]
    // children: any
}


const AForm: FC<{
    AformConfig: IAFROMCONFIG[],
    onsubmit: (arr: any) => void
    onResetFields?:any,
    layout?: string
}> = ({ AformConfig, onsubmit, onResetFields, layout }) => {
    const [form] = Form.useForm();
    const onFinish = (values: any) => {
        onsubmit(values)
        // console.log('Received values from form: ', values);
    };

    const checkPrice = (_: any, value: { number: number }) => {
        if (value.number > 0) {
            return Promise.resolve();
        }
        return Promise.reject(new Error('Price must be greater than zero!'));
    };

    //重置
    const onReset = () => {
        // console.log(111111111)
        form.resetFields()
        onResetFields()
    }

    const renderAform = () => {
        return AformConfig.map((item: any, index) => {
            if (item.type === "Find") {
                return <Form.Item>
                    <Button className={style["ant-btn"]} type="primary" htmlType="submit">
                        {item.text}
                    </Button>
                </Form.Item>
            } else if (item.type === "Input") {
                return <Form.Item name={item.key} label={item.lable} >
                    <Input placeholder={item.placenholder}></Input>
                </Form.Item>
            } else if (item.type === "Select") {
                return <Form.Item name={item.key} label={item.lable} >
                    <Select placeholder={"请选择状态"}>
                        {/* <Option value={item.key}>{item.lable}</Option> */}
                        {
                            item.options && item.options.map((opt: IOPTIONS, index: number) => {
                                return <Option value={opt.key}> {opt.lable}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
            } else if (item.type === "Reset") {
                return <Form.Item>
                    <Button type="primary" onClick={onReset} >
                        {item.text}

                    </Button>
                </Form.Item>
            }
        }


            // <Form.Item name={item.key} label={item.lable} rules={[{ validator: checkPrice }]}>
            //     <item.type>
            //         {
            //             item.options && item.options.map((opt:IOPTIONS, index:number) => {
            //                 return <Option value={item.key}>{item.lable}</Option>
            //             })
            //         }
            //         {
            //             item.text&&item.text
            //         }
            //     </item.type>
            // </Form.Item>

        )
    }
    return (
        <div className="box-pd">
            <Form
                name="customized_form_controls"
                layout={(layout || "inline") as any}
                onFinish={onFinish}
                form={form}
                initialValues={{
                    price: {
                        number: 0,
                        currency: 'rmb',
                    },
                }}
            >

                {
                    renderAform()
                }
            </Form>
        </div>
    )
}

export default AForm


